<template>
    <div>
        <div class="evaluation">
            <div class="flex evaluation-show" v-if="!nocomment">
                <div class="left">
                    <p class="name">综合评分</p>
                    <p class="number">{{score}}</p>
                    <star :n="score" :all="5" size=".2rem" />
                </div>
                <div class="right">
                    <div :key="index" v-for="(item, index) in grades">
                        <div class="name">{{item.name}}</div>
                        <star :n="item.n"  size=".16rem" :all="5" />
                        <div class="pingjia"
                            :class="[
                                `pingjia_${
                                    item.n >= 4.5 ? '1' :
                                    item.n >= 3.5 ? '2' :
                                    item.n >= 3 ? '3' :
                                    '4'
                                }`
                            ]"
                        >{{
                            item.n >= 4.5 ? '超棒' :
                            item.n >= 3.5 ? '很好' :
                            item.n >= 3 ? '较好' :
                            '较差'
                        }}</div>
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="flex item" v-for="(item, index) in list" :key="index">
                    <img class="head-img-ipc" v-lazy="item.img" v-on:click="catheadimg(item.img)" />
                    <div class="inner-box">
                        <p class="name">{{item.name}}</p>
                        <p class="time">{{item.time}}</p>
                        <p class="evaluation">{{item.evaluation}}</p>
                        <p class="inner">{{item.inner}}</p>
                        <div class="img" v-if="item.imgs.length > 0">
                            <img class="img-ipc"
                                v-for="(img, imgIndex) in item.imgs" 
                                :key="`img_${imgIndex}`" 
                                v-lazy="img.src"
                                v-on:click="onReview(item.imgs, imgIndex)"
                            />
                        </div>
                        <template  v-if="item.revieweReplyInfo && item.revieweReplyInfo.length > 0">
                            <div class="reply" v-for="(row, index) in item.revieweReplyInfo" :key="index">
                                <div class="flex flex-space-x">
                                    <p class="name">{{row.name}}</p>
                                    <p class="time">{{row.time}}</p>
                                </div>
                                <div class="reply-inner">{{row.inner}}</div>
                                <div class="img" v-if="row.imgs.length > 0">
                                    <img style="background: rgba(204, 204, 204, 0.39)" class="img-ipc"
                                        v-for="(img, imgIndex) in row.imgs" 
                                        :key="`img_${imgIndex}`" 
                                        v-lazy="img.src"
                                        v-on:click="onReview(row.imgs, imgIndex)"
                                    />
                                </div>
                            </div>
                        </template>
                        <!-- 追评 -->
                        <template  v-if="item.reviewInfos && item.reviewInfos.length > 0">
                            <div v-for="(row, index) in item.reviewInfos" :key="index">
                                <div class="after-reinner">用户{{row.days}}天后追评</div>
                                <p data-v-2c2b384a="" class="evaluation"></p>
                                <div class="reply-inner">{{row.inner}}</div>
                                <div class="img" v-if="row.imgs.length > 0">
                                    <img class="img-ipc"
                                        v-for="(img, imgIndex) in row.imgs" 
                                        :key="`img_${imgIndex}`" 
                                        v-lazy="img.src"
                                        v-on:click="onReview(row.imgs, imgIndex)"
                                    />
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-nil-data-tip" v-if="list.length === 0 || isLast">
            <span class="text">{{(isLast && list.length !== 0) ? '没有更多评价' : '暂无数据'}}</span>
        </div>
    </div>
</template>
<script>
import { ImagePreview } from 'vant'
import star from '@/components/performance/star_show/index.vue'
export default {
    components: {
        star
    },
    props: ['list', 'grades', 'score', 'isLast', 'nocomment'],
    watch: {
        list(val){this.list = val},
        grades(val){this.grades = val},
        score(val){this.score = val},
        isLast(val){this.isLast = val},
    },
    data(){
        return {}
    },
    methods: {
        catheadimg(img){
            ImagePreview({
                images: [img], 
                showIndex: false,
                onClose: () => {}
            })
        },
        onReview(imgs, index){
            ImagePreview({
                images: imgs.map(e => e.src), 
                startPosition: index,
                onClose: () => {}
            })
        },
    }
}
</script>

<style lang="scss" scoped>
@import './evaluation.scss';
</style>

